<template>
	<wsPage title="优惠券列表">
		<div slot="page_operate">
			<Button type="ghost" @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<!-- <Row class="tab-demo">
			<Col span="24">
				<Button :type="index == 1 ? 'primary' : 'ghost'" @click="query">全部优惠券</Button>
				<Button :type="index == 5 ? 'primary' : 'ghost'" @click="query(1)">未发布</Button>
				<Button :type="index == 2 ? 'primary' : 'ghost'" @click="query(2)">已发布</Button>
				<Button :type="index == 2 ? 'primary' : 'ghost'" @click="query(3)">已失效</Button>
			</Col>
		</Row> -->
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="优惠券名称">
			            <Input v-model="queryForm.name" placeholder="请输入"></Input>
			        </FormItem>
			        <FormItem label="使用范围">
						<Select clearable v-model="queryForm.userange" placeholder="请选择" class="ws-form-select">
							<Option value="1">商铺</Option>
							<Option value="2">商品基础分类</Option>
							<Option value="3">商品</Option>
						</Select>
					</FormItem>
					<FormItem label="发布状态">
						<Select clearable v-model="queryForm.status" placeholder="请选择" class="ws-form-select">
							<Option value="1">未发布</Option>
							<Option value="2">已发布</Option>
							<Option value="3">已失效</Option>
						</Select>
					</FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				<!-- <Button type="ghost" @click="status2" :disabled="!isTableSelected" v-if="status==1">发布优惠券</Button>
				<Button type="ghost" @click="status1" :disabled="!isTableSelected" v-if="status==2">下架优惠券</Button> -->
				<Button type="ghost" @click="addCoupon">添加优惠券</Button>
				<!-- <Button type="ghost" :disabled="!isTableSelected" @click="batchDelCoupon">批量删除</Button> -->
			</div>
			<div slot="list_data">
				<Table border 
					:columns="table.columns" 
					:data="table.data" 
					@on-selection-change="tableSelected">
				</Table>
			</div>
		</wsSmPanel>

	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
				useType:null,
				userange:'',
				couponId:null,
				range:null,
				status:null,
                //条件查询
				queryForm: {
					name: '',
					status:null,
					userange:null
				},
				couponForm:{
					id:'',
					userange:null
				},
				table: {
					columns: [{
						title: '编号',
                        key: 'id',
                        width: 80,
                        align: 'center',
                        fixed: 'left'
					},{
						title: '优惠券名称',
                        key: 'name',
                        align: 'center'
					},{
						title: '使用范围',
                        key: 'userange',
                        align: 'center',
                        render: (h, params) => {
                        	return h('span', {        		
                        	}, this.initUseRange(params.row.userange))
                        }
					},{
						title: '有效期',
                        key: 'startDate',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                        	return h('span', {        		
                        	}, 
                        	params.row.expiredType == '1' ? (params.row.startDate + ' ~ ' + params.row.endDate):(params.row.expiredDay + '天'))
                        }
					},{
						title: '面值',
                        key: 'couponAmount',
                        align: 'center',
                        render: (h, params) => {
                        	return h('span', {        		
                        	}, params.row.couponAmount + '元')
                        }
					},{
						title: '满足金额',
                        key: 'satisfyAmount',
                        align: 'center',
                        render: (h, params) => {
                        	return h('span', {        		
                        	}, params.row.satisfyAmount + '元')
                        }
					},{
						title: '状态',
                        key: 'status',
                        align: 'center',
                        render: (h, params) => {
                        	return h('Tag', {
                        		props: {
                        			type: 'border',
                        			color: params.row.status == '1' ? 'yellow' : params.row.status == '2' ? 'green' : 'red'
                        		}
                        	}, params.row.status == '1' ? '未发布' : params.row.status == '2' ? '已发布' : '已失效')
                        }
					},{
						title: '已领取数/总数',
                        key: 'receivedAmount',
                        align: 'center',
                        render: (h, params) => {
							return h('div', [params.row.status == 2 ? h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										this.couponRecord(params.row.id, 1);
									}
								}
							}, params.row.receivedAmount) : ''])
						}
					},{
						title: '已使用数/已领取数',
                        key: 'usedAmount',
                        align: 'center',
                        render: (h, params) => {
							return h('div', [params.row.status == 2 ? h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										this.couponRecord(params.row.id, 2);
									}
								}
							}, params.row.usedAmount) : ''])
						}
					},{
						title: '操作',
						width: 200,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {
							return h('div', [params.row.status == 1 ? h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
                                		this.status2(params.row.id, params.row.endDate, params.row.expiredType);
									}
								}
							}, '发布') : '', params.row.status == 2 ? h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										this.status1(params.row.id);
									}
								}
							}, '下架') : '', params.row.status == 1 || params.row.status == 3 ? h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
                                		this.batchDelRow(params.row.id);
									}
								}
							}, '删除') : '', params.row.status == 1 || params.row.status == 3 ? h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										let rowId = params.row.id;
                                		this.editCoupon(rowId);
									}
								}
							}, '编辑') : ''])
						}
					}],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					selection: [], //选中
				}


			}
		},
		computed: {
			/**
			 * 表格行是否为选中状态
			 */
			isTableSelected() {
				return this.table.selection.length > 0;
			},
			isEdit() {
		      return !Util.vad.isBlank(this.propertyModal.form.id);
		    }
		},
		mounted() {
			this.init();
		},
		methods: {
			initStatus(status){
				if(status==1){
					return '未发布';
				};
				if(status==2){
					return '已发布';
				};
				if(status==3){
					return '已失效';
				};
			},
			initUseRange(userange){
				if(userange==1){
					return '商铺';
				};
				if(userange==2){
					return '商品基础分类';
				};
				if(userange==3){
					return '商品';
				};
			},
			init() {
				this.query();
			},
			refresh(){
				this.table.page.pageSize = 10;
				this.table.page.pageNum = 1;
				this.table.page.total = 0;
				this.queryForm.name = '';
				this.queryForm.status = null;
				this.queryForm.userange = null;
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ms/coupons?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_){
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 表格选择变更事件
			 */
			tableSelected(selection_) {
				this.table.selection = selection_;
			},
			/**
			 * 单个删除确认
			 */
			singleDelProduct(rowId) {
        		const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '你确认删除本行记录，同时删除其商品sku吗?',
        			onOk: function() {
        				_this.delRow(rowId);
        			}
        		});		
			},
			/**
			 * 删除单个商品，同时删除其商品sku
			 */
			delRow(rowId){
				const _this = this;
				this.axios.delete('/ws/ms/products/' + rowId ).then(function(response) {
		      		let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
						_this.query();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('删除商品失败:' + message_);
					}	
			    });				
			},
			/**
			 * 发布
			 */
			status2(id, endDate, type) {
				if(type == '1' && new Date().getTime() > new Date(endDate).getTime() + 86399000){
					this.$Message.warning('发布失败: 当前时间已过截止日期');
					return;
				}
				let ids = [];
			    ids.push(id);
				let status=2;	
				const _this = this;
				_this.$confirm({
        			content: '你确认发布此优惠券吗?',
        			onOk: function() {
						_this.axios.post('/ws/ms/auditCoupon/'+status,ids).then(function(response) {
							let res = response.data;				
							if(0 === res.meta.code) {
								_this.$Message.success('发布成功');
								_this.query();
							}else{
								let message_ = res.meta.message;
								_this.$Message.warning('发布失败:' + message_);
							}
						});
					}
				})
			},
			/**
			 * 下架
			 */
			status1(id) {
				let ids = [];
				ids.push(id);
				let status=1;	
				const _this = this;
				_this.$confirm({
        			content: '你确认下架此优惠券吗?',
        			onOk: function() {
						_this.axios.post('/ws/ms/auditCoupon/'+status,ids).then(function(response) {
							let res = response.data;				
							if(0 === res.meta.code) {
								_this.$Message.success('下架成功');
								_this.query();
							}else{
								let message_ = res.meta.message;
								_this.$Message.warning('下架失败:' + message_);
							}
						});
					}
				})
			},

			/**
			 * 批量删除提示
			 */
			batchDelCoupon() {
				const _this = this;
				
			},
			/**
			 * 批量删除
			 */
			batchDelRow(id){
				let ids = [];
				ids.push(id);
				
				const _this = this;
				_this.$confirm({
        			content: '你确认删除此优惠券吗?',
        			onOk: function() {
        				_this.axios.post('/ws/ms/coupons/batchDel' , ids).then(function(response) {
				      		let res = response.data;
							if(0 === res.meta.code) {
								_this.$Message.success(res.meta.message);
								_this.query();
							} else {
								let message_ = res.meta.message;
								_this.$Message.warning('删除优惠券失败:' + message_);
							}	
					    });
        			}
        		});
					
			},


			/**
			 * 跳转到优惠券新增页面
			 */
			addCoupon(){
				this.$router.push({name:'ms_coupon_edit'});
			},
			//优惠券编辑页面
			editCoupon(rowId){
				this.$router.push({name:'ms_coupon_edit',query:{id:rowId}});
			},
			couponRecord(rowId, type){
				this.$router.push({name:'ms_coupon_record',query:{id:rowId, type: type}});
			}
			
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>